<template>
  <div>
    <!-- 头部卡片行 -->
    <el-row :gutter="13">
      <el-col :span="6">
        <div class="top_card card1">
          <div class="card_top">
            <div class="card_top_left" v-if="Object.keys(DashboardInfo).length">
              <p v-if="Object.keys(DashboardInfo.AttendanceInfo).length">
                <span name="title">{{DashboardInfo.AttendanceInfo.CreateDate|AttendanceTime}}</span><br />
                <span name="content">{{DashboardInfo.AttendanceInfo.TypeName_CHS}}</span>
              </p>
              <p v-else>
                <span name="title">未签到</span><br />
                <span name="content">请到考勤管理签到</span>
              </p>
            </div>
            <div class="card_top_right">
              <i class="el-icon-time"></i>
            </div>
          </div>
          <router-link to="/Attendance/Edit" tag="div" class="card_footer card_foot1">
            <span v-if="DashboardInfo.AttendanceInfo">{{DashboardInfo.AttendanceInfo.TypeName_CHS}}了
              &nbsp;<i class="el-icon-right card_icon"></i></span>
            <span v-else>更多 &nbsp;<i class="el-icon-right card_icon"></i></span>
          </router-link>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="top_card card2">
          <div class="card_top">
            <div class="card_top_left">
              <p>
                <span name="title">{{DashboardInfo.ResumeCount}}</span>
                <br />
                <span name="content">简历管理</span>
              </p>
            </div>
            <div class="card_top_right">
              <i class="el-icon-document"></i>
            </div>
          </div>
          <router-link to="/Resume/List" tag="div" class="card_footer card_foot2">
            <span>更多 &nbsp;<i class="el-icon-right card_icon"></i></span>
          </router-link>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="top_card card3">
          <div class="card_top">
            <div class="card_top_left">
              <p>
                <span name="title">{{DashboardInfo.WageCount}}</span><br />
                <span name="content">薪资管理</span>
              </p>
            </div>
            <div class="card_top_right">
              <i class="el-icon-money"></i>
            </div>
          </div>
          <router-link to="/Wage/Salary" tag="div" class="card_footer card_foot3">
            <span>更多 &nbsp;<i class="el-icon-right card_icon"></i></span>
          </router-link>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="top_card card4">
          <div class="card_top">
            <div class="card_top_left">
              <p>
                <span name="title">{{DashboardInfo.UserCount}}</span><br />
                <span name="content">人员管理</span>
              </p>
            </div>
            <div class="card_top_right">
              <i class="el-icon-user"></i>
            </div>
          </div>
          <router-link to="/User/List" tag="div" class="card_footer card_foot4">
            <span>更多 &nbsp;<i class="el-icon-right card_icon"></i></span>
          </router-link>
        </div>
      </el-col>
    </el-row>
    <!-- 内容行 -->
    <el-row :gutter="10">
      <el-col :span="14">
        <!-- 我的便签 -->
        <el-row>
          <el-col :span="24">
            <div class="content_card">
              <div class="ct_card_title">
                <span><i class="el-icon-edit"></i>&nbsp;我的便签</span>
              </div>
              <div class="ct_card_content" v-if="Object.keys(DashboardInfo).length">
                <!-- 便签显示,前五行 -->
                <div v-if="DashboardInfo.MemoList.length" class="card_content_memo">
                  <el-row v-for="(item,index) in DashboardInfo.MemoList" :key="index" class="memo_row">
                    <el-col :span="2">
                      <!-- 便签头像 -->
                      <div class="memo_img_div">
                        <el-avatar size="large" :src="'data:image/jpeg;base64,'+$store.state.UserInfo.ImageData">
                        </el-avatar>
                      </div>
                    </el-col>
                    <el-col :span="22">
                      <el-row class="memo_div">
                        <el-col :span="24">
                          <div class="memo_title">
                            <div>
                              <router-link to="/User/Profile">
                                <span v-if="item.Title">{{item.Title}}</span>
                                <span v-else>无标题</span>
                              </router-link>
                            </div>
                            <div>
                              <p><i class="el-icon-time"></i>&nbsp;{{item.CreateDate|TimeFilter}}</p>
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="24">
                          <div class="memo_content">
                            <p>
                              {{item.Description}}
                            </p>
                          </div>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
                <div v-else class="card_content_memo" style="text-align:center;padding-bottom:10px;">
                  <span style="color:#DEE0E5;">无便签</span>
                </div>
                <div>
                  <el-input placeholder="便签内容" v-model="MemoContent" size="mini" style="width:100%;">
                    <template slot="append">
                      <el-button size="mini" icon="el-icon-circle-plus" @click="AddMemo"></el-button>
                    </template>
                  </el-input>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 公告通知 -->
        <el-row>
          <el-col :span="24">
            <div class="content_card">
              <div class="ct_card_title">
                <span>公告通知</span>
              </div>
              <div class="ct_card_content">
                <el-table :data="DashboardInfo.NoticeList">
                  <el-table-column label="发布" width="110" prop="DepartmentName"></el-table-column>
                  <el-table-column label="日期" width="170" prop="CreateDate">
                    <template slot-scope="scope">
                      {{scope.row.CreateDate|TimeFilter}}
                    </template>
                  </el-table-column>
                  <el-table-column label="状态" min-width="130" align="left" prop="StatusName_CHS">
                    <template slot-scope="scope">
                      <el-tag effect="dark" size="small " :style="'border:none;background:'+scope.row.Visual">
                        {{ scope.row.StatusName_CHS }}
                      </el-tag>
                      <el-tag v-if="scope.row.IsTop" effect="dark" type="danger" size="small" style="margin-left:10px;">
                        置顶</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="标题" min-width="200" prop="Title"></el-table-column>
                  <el-table-column label="">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" icon="el-icon-search"
                        @click="$router.push({path:'/Notice/View',query:{pk_Notice:scope.row.pk_Notice}})" round>查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 新闻资讯 -->
        <el-row>
          <el-col :span="24">
            <div class="content_card">
              <div class="ct_card_title">
                <span>新闻资讯</span>
              </div>
              <div class="ct_card_content">
                <el-table :data="DashboardInfo.ArticleList">
                  <el-table-column label="类型" width="110" prop="TypeName_CHS"></el-table-column>
                  <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                      {{scope.row.CreateDate|TimeFilter}}
                    </template>
                  </el-table-column>
                  <el-table-column label="状态">
                    <template slot-scope="scope">
                      <el-tag effect="dark" size="small " :style="'border:none;background:'+scope.row.Visual">
                        {{ scope.row.StatusName_CHS }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="标题" min-width="220" prop="Title"></el-table-column>
                  <el-table-column label="">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" icon="el-icon-search"
                        @click="$router.push({path:'/Article/View',query:{id:scope.row.pk_Article}})" round>查看
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- 绩效任务 -->
        <el-row>
          <el-col :span="24">
            <div class="content_card">
              <div class="ct_card_title">
                <span>绩效任务</span>
              </div>
              <div class="ct_card_content">
                <el-table :data="DashboardInfo.TaskListDesc">
                  <el-table-column label="类型" width="110" prop="TypeName_CHS"></el-table-column>
                  <el-table-column label="日期" width="180">
                    <template slot-scope="scope">
                      {{scope.row.CreateDate|TimeFilter}}
                    </template>
                  </el-table-column>
                  <el-table-column label="状态">
                    <template slot-scope="scope">
                      <el-tag effect="dark" size="small " :style="'border:none;background:'+scope.row.Visual">
                        {{ scope.row.StatusName_CHS }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="标题" min-width="220" prop="Title"></el-table-column>
                  <el-table-column label="">
                    <template slot-scope="scope">
                      <el-button type="primary" size="mini" icon="el-icon-search"
                        @click="$router.push({path:'/Task/View',query:{id:scope.row.pk_Task}})" round>查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <!-- 任务完成排行 -->
        <el-row>
          <el-col :span="24">
            <div class="content_card">
              <div class="ct_card_title">
                <span>任务完成排行</span>
              </div>
              <div class="ct_card_content">
                <ve-histogram ref="chart" width="auto" :data-empty="!TakeChartDt.rows.length" :data="TakeChartDt">
                </ve-histogram>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 考勤次数 -->
        <el-row>
          <el-col :span="24">
            <div class="content_card">
              <div class="ct_card_title">
                <span>本月考勤统计</span>
              </div>
              <div class="ct_card_content">
                <ve-ring ref="chart1" width="auto" :settings="chartSettings" :data-empty="!AttListDt.rows.length"
                  :data="AttListDt">
                </ve-ring>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
// 卡片top背景色
.card1 {
  background: #00c0ef;
}
.card2 {
  background: #00a55a;
}
.card3 {
  background: #f39c12;
}
.card4 {
  background: #dd4b39;
}
// 卡片foot背景色
.card_foot1 {
  background: #00add7;
}
.card_foot2 {
  background: #009551;
}
.card_foot3 {
  background: #db8c10;
}
.card_foot4 {
  background: #c74333;
}
.top_card {
  //background: #00c0ef;
  height: 130px;
  border-radius: 5px;
  color: white;
  position: relative;
  &:hover {
    .card_top {
      .card_top_right {
        font-size: 74px;
      }
    }
  }
  //卡片顶部
  .card_top {
    padding: 10px;
    p {
      line-height: 30px;
    }
    span[name="title"] {
      font-size: 30px;
      font-weight: bold;
    }
    span[name="content"] {
      font-size: 13px;
    }
    .card_top_left {
      float: left;
    }
    .card_top_right {
      float: right;
      font-size: 64px;
      transition: all 0.5s;
    }
  }
  //卡片底部
  .card_footer {
    line-height: 25px;
    //background: #00add7;
    text-align: center;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 0 0 5px 5px;
    font-size: 13px;
    &:hover {
      cursor: pointer;
    }
    .card_icon {
      padding: 1px;
      border-radius: 50%;
      background: white;
      color: #00add7;
    }
  }
}

// content卡片同意样式
.content_card {
  border: 2px solid #e6eaee;
  background: white;
  border-top: 4px solid #d5d9e0;
  //标题部分
  .ct_card_title {
    font-size: 14px;
    padding: 10px;
    border-bottom: 1px solid #f6f6f6;
    i {
      font-size: 16px;
    }
  }
  // 内容部分
  .ct_card_content {
    padding: 10px;
    // 便签内容
    .card_content_memo {
      margin-bottom: 10px;
      border-bottom: 1px solid #f6f6f6;
      .memo_row {
        border-bottom: 1px solid #ebeef5;
      }
      .memo_img_div {
        padding-left: 10px;
      }
      .memo_div {
        padding-left: 10px;
        .memo_title {
          div {
            &:first-child {
              float: left;
              a {
                font-size: 13px;
              }
            }
            &:last-child {
              float: right;
              color: #777777;
              font-size: 14px;
            }
          }
        }
        .memo_content {
          p {
            line-height: 30px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.el-row {
  margin-bottom: 8px;
}
</style>
<script>
export default {
  data () {
    this.chartSettings = {
      roseType: 'radius'
    }
    return {
      DashboardInfo: {},
      //公告管理数据
      NoticeDt: [],
      //新闻管理数据
      ArticleDt: [],
      //绩效任务数据
      TaskDt: [],
      //任务完成排行榜，图表数据
      TakeChartDt: {
        columns: ['Name', '任务量'],
        rows: []
      },
      //考勤统计图表
      AttListDt: {
        columns: ['Type', '次数'],
        rows: []
      },
      MemoContent: ''//便签内容
      //TakeChartDt: {}
    }
  },
  mounted () {
    //this.TakeChartDt.rows = [{ 任务量: 1, Name: 'dd' }]
    //获取数据
    this.$axios({
      url: '/HrApi/DashboardMange/GetDashboardInfo',
      method: 'GET',
      params: {
        pk_User: this.$store.state.UserInfo.pk_User
      }
    }).then(res => {
      if (!res.data.code) {
        // this.TakeChartDt = {
        //   columns: ['Name', '任务量'],
        //   rows: res.data.data.UserTask
        // }
        this.DashboardInfo = res.data.data
        this.$nextTick(() => {
          this.TakeChartDt.rows = res.data.data.UserTask
          this.AttListDt.rows = res.data.data.AttList
        })

      }
    })
    //console.log(this.TakeChartDt.rows.lenght)
  },
  filters: {
    AttendanceTime (t) {
      if (t === null) {
        return '未签到'
      }
      return t.split('T')[1].split('.')[0].split(':')[0] + ":" + t.split('T')[1].split('.')[0].split(':')[1]
    },
    //时间过滤器
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt;
    }
  },
  methods: {
    /*
    添加便签
    */
    AddMemo () {
      if (this.MemoContent.length == 0) {
        this.$notify({
          title: '提醒',
          message: '便签内容不能为空',
          type: 'warning',
          duration: 1500
        });
        return
      }
      //添加便签内容
      this.$axios({
        url: '/HrApi/DashboardMange/UpdateMemo',
        method: 'POST',
        data: this.$Qs.stringify({
          Memo: JSON.stringify({ Description: this.MemoContent }),
          Type: 'Add',
          pk_User: this.$store.state.UserInfo.pk_User
        })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success('添加成功')
          //重现拉取数据
          this.$axios({
            url: '/HrApi/DashboardMange/GetMemoList',
            method: 'GET',
            params: {
              page: 1,
              limit: 5,
              Term: '',
              pk_User: this.$store.state.UserInfo.pk_User
            }
          }).then(r => {
            this.DashboardInfo.MemoList = r.data.data.MemoList
          })
          this.MemoContent = "";
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  watch: {
    DashboardInfo (n, l) {
      this.$nextTick(() => {
        this.$refs.chart.echarts.resize()
        this.$refs.chart1.echarts.resize()
      })
    }
  }
}
</script>